import TodoItem from '../TodoItem/index'

// 任务列表内容组件
const TodoMain = ({ list, type, allChecked }) => {
  const showList = list.filter((item) => {
    if (type === 'active') {
      return item.isDone === false
    } else if (type === 'completed') {
      return item.isDone === true
    } else {
      return item
    }
  })
  const checked = list.every((item) => item.isDone === true)
  return (
    <section className="main">
      <input
        id="toggle-all"
        className="toggle-all"
        type="checkbox"
        checked={checked}
        onChange={allChecked}
      />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {showList.map((item) => (
          <TodoItem item={item} key={item.id}></TodoItem>
        ))}
      </ul>
    </section>
  )
}
export default TodoMain
